<template>
<div class="">
    <h1>hello </h1>   
    <h2>{{msg}}</h2> 
    <el-row>
        <el-button>默认按钮</el-button>
        <el-button type="primary">主要按钮</el-button>
        <el-button type="success">成功按钮</el-button>
        <el-button type="info">信息按钮</el-button>
        <el-button type="warning">警告按钮</el-button>
        <el-button type="danger">危险按钮</el-button>
    </el-row>
    <el-steps :active="active" finish-status="success">
        <el-step title="步骤 1"></el-step>
        <el-step title="步骤 2"></el-step>
        <el-step title="步骤 3"></el-step>
        <el-step title="步骤 4"></el-step>
        <el-step title="步骤 5"></el-step>
        <el-step title="步骤 6"></el-step>
    </el-steps>

<el-button style="margin-top: 12px;" @click="next">下一步</el-button>
</div>
</template>

<script>
export default {
  name: 'Two',
  data () {
    return {
      msg: '第二个组件页面,ele样式按钮',
      active: 2
    }
  },
  methods: {
      next() {
        if (this.active++ > 2) this.active = 0;
      }
    }
}
</script>